<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7_固定定位全屏遮罩</title>
    <style>
        .mask{
            background-color: rgba(0,0,0,.4);
            /* 固定定位以视口(html窗口)为参照物
            紧贴四个边,实现撑满全屏的效果 */
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;

        }
    </style>
</head>
<body>
    <div class="mask"></div>
    <div>
        <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur distinctio iure, odit praesentium
            quas quibusdam rem totam ut voluptatem voluptates? Dicta laudantium minima omnis, pariatur quam quidem.
            Iure, sit vel?
        </div>
        <div>Accusantium fugit magnam quaerat, quas quasi quibusdam reiciendis rem vitae? Aspernatur aut cum dolor eos
            eveniet ex explicabo fugit id in minus molestiae molestias provident, quidem sequi tenetur voluptas,
            voluptatibus.
        </div>
        <div>Accusamus alias aliquam architecto aspernatur commodi, cum cumque explicabo facere hic impedit ipsam iure
            molestiae mollitia obcaecati omnis optio quo reiciendis unde vero voluptatem? Aut doloribus et possimus
            provident tenetur.
        </div>
        <div>Adipisci aliquam animi commodi delectus dicta, dolor doloremque eum eveniet fuga laboriosam magnam nemo
            officia quam, quia quo quos sed tempora. Excepturi nisi quam quisquam recusandae similique veritatis
            voluptate voluptatibus!
        </div>
        <div>Animi dolor perferendis provident sint. Aspernatur consequatur culpa, doloremque doloribus dolorum ea est
            ex facere fugiat laudantium maiores neque nihil perspiciatis porro qui reiciendis, repellendus sed, tempore
            tenetur voluptate! Porro.
        </div>
        <div>Animi dolorem eaque excepturi exercitationem harum id ipsam iure labore maiores nam nobis praesentium,
            quibusdam ratione repudiandae similique sit voluptas voluptatibus! Aperiam consectetur eos esse laudantium
            quod soluta vitae voluptates.
        </div>
        <div>Amet aperiam culpa dolore ea eos error esse fuga nostrum praesentium reiciendis! Ad culpa earum id incidunt
            ipsam laboriosam quas quis quos reiciendis repellendus, repudiandae saepe vitae, voluptates voluptatibus
            voluptatum.
        </div>
        <div>Amet beatae commodi consequuntur eius eos, laboriosam libero magnam, maxime odio, odit pariatur porro
            quibusdam ratione rem soluta. Aspernatur beatae delectus earum eligendi, facilis magnam perferendis porro
            reiciendis saepe voluptate!
        </div>
        <div>Dolor eligendi iure maxime neque provident quaerat, sit tempore temporibus veritatis voluptatum! Ab ea
            eaque est, exercitationem, ipsa itaque minus necessitatibus odio officiis quaerat quasi rem repellendus
            sapiente sint sunt.
        </div>
        <div>Beatae cumque ea nostrum quo, sunt vel velit. Accusamus accusantium aut consectetur error est eum ex fugiat
            id inventore ipsum labore, libero molestiae necessitatibus nihil quis reiciendis rerum suscipit vitae!
        </div>
        <div>Consectetur obcaecati vero voluptates! Accusantium consequuntur mollitia repellat sint! Earum inventore
            omnis perferendis perspiciatis vero. Aliquid at consequuntur laudantium nulla unde. A, atque cum dicta
            dolorum quaerat quia reiciendis reprehenderit.
        </div>
        <div>Amet animi assumenda at atque aut culpa earum eligendi, error expedita, facere illo magnam magni minus
            nemo, nulla odit perspiciatis quibusdam reprehenderit sint sit soluta unde velit voluptates. Iste, iure.
        </div>
        <div>Ab blanditiis consectetur consequatur dicta dolorum ex facilis mollitia necessitatibus nulla possimus quae
            suscipit, unde vitae. A, accusamus architecto, aut eius esse facere impedit, nobis reiciendis similique sunt
            veritatis voluptatem.
        </div>
        <div>Adipisci, assumenda deleniti, dignissimos doloribus earum eum facere inventore ipsum minima porro possimus
            repellendus ullam! At dicta tempora vel. Assumenda eaque ipsa itaque minima nemo officiis optio saepe sed,
            sunt.
        </div>
        <div>A accusamus cupiditate dolore ea ex fugit laboriosam magnam repellendus saepe soluta. Aliquid, facilis id
            iusto labore laudantium molestiae neque optio quis quos temporibus! Adipisci consequuntur debitis quae qui
            repellendus?
        </div>
        <div>Aspernatur, molestias, neque! Aut culpa cupiditate et excepturi ipsum minima molestiae nesciunt, obcaecati
            placeat qui quo rerum vitae voluptates. Doloribus officia similique voluptas. Aspernatur at dolores esse
            laudantium voluptatem! Deserunt?
        </div>
        <div>Ad aspernatur, aut distinctio enim esse et facere hic inventore nesciunt numquam pariatur possimus,
            suscipit velit! Accusamus animi aspernatur consectetur dolores illo laudantium nesciunt possimus quod
            repellendus sapiente. Earum, magni.
        </div>
        <div>Aut blanditiis eius eligendi error excepturi facilis illo nemo, quidem, quis reiciendis repudiandae sint
            tempora. Aliquid animi cupiditate ea esse id laboriosam natus officiis, optio quam quos, reprehenderit vel
            veniam?
        </div>
        <div>Architecto at cupiditate, dicta distinctio ea earum esse excepturi ipsum iste laboriosam laborum magni modi
            molestias natus numquam officia optio perspiciatis qui quibusdam quis quod tenetur, totam, unde ut vel?
        </div>
        <div>Aut consequuntur distinctio impedit in incidunt ipsum, laborum mollitia quae quasi quod recusandae
            reprehenderit repudiandae rerum sed tempora tempore tenetur? Accusamus cupiditate deleniti dignissimos
            distinctio ducimus est in iste quasi.
        </div>
        <div>Aliquid beatae dolor earum error eum, expedita, in inventore, quae qui quis repellendus reprehenderit
            repudiandae sequi ut vel! Blanditiis culpa expedita harum perspiciatis possimus quo repellendus sequi
            suscipit temporibus vero?
        </div>
        <div>Accusamus accusantium animi architecto error ex expedita hic iste magni maxime nobis nostrum odit quas
            quasi quisquam recusandae rem reprehenderit repudiandae sapiente sequi, similique tempore temporibus
            voluptas voluptatem! Ea, sed.
        </div>
        <div>Accusamus alias aliquam blanditiis consequuntur, deserunt distinctio dolore enim fugiat impedit incidunt
            itaque minima molestias mollitia nobis odio omnis, perferendis placeat quos ratione repellat repellendus sed
            soluta tempora? Magnam, voluptate.
        </div>
        <div>Error exercitationem id illum necessitatibus nemo odit provident rem reprehenderit saepe! Illo magni
            repellendus sunt. Aut culpa debitis doloribus enim impedit odit qui vero? Commodi consequuntur dolor nam
            repudiandae soluta!
        </div>
        <div>Adipisci corporis dicta dolor esse est, expedita explicabo harum incidunt ipsam iste labore neque nesciunt
            nostrum odit perferendis quas qui quia quibusdam quod ratione repudiandae rerum sequi voluptate! Ipsa,
            laborum?
        </div>
        <div>Aspernatur blanditiis debitis dolor ea eaque, et, expedita facilis illum inventore, ipsam iste itaque
            maiores maxime minus nam necessitatibus nisi odio placeat quam quibusdam temporibus voluptate voluptatem
            voluptatibus! Inventore, quidem?
        </div>
        <div>Adipisci asperiores cupiditate fugiat, harum iste nam, perferendis quia quibusdam ratione sapiente ullam
            veniam voluptate? Blanditiis consectetur debitis exercitationem explicabo id laudantium maxime quam, qui,
            repudiandae saepe tempore veniam, vero!
        </div>
        <div>Accusantium cupiditate dolor dolore, dolorem error eveniet minima nesciunt nostrum placeat quisquam
            repellendus saepe ullam veniam? Esse, facilis voluptatum. Dignissimos explicabo perspiciatis ullam. A, dolor
            impedit mollitia non odio sapiente!
        </div>
        <div>Ad at commodi consequuntur earum enim est expedita facere impedit incidunt magnam minus molestiae neque
            nihil non numquam odit pariatur provident quas quasi, quisquam recusandae, sequi tempore veritatis
            voluptatem, voluptatibus.
        </div>
        <div>At consequatur cum deleniti enim error illo impedit, laborum tenetur voluptatem? Deleniti ex, id inventore
            itaque magnam molestiae necessitatibus nihil nobis odit porro, possimus quis repudiandae suscipit.
            Inventore, sint, vel?
        </div>
        <div>Accusantium assumenda beatae ducimus error harum impedit neque nesciunt quidem rem tenetur. Illum quisquam,
            tempora? Atque dignissimos dolor error eveniet illo impedit necessitatibus odit perferendis placeat
            reprehenderit, sint soluta, totam.
        </div>
        <div>Architecto autem delectus et in ipsa laudantium nisi nostrum obcaecati odit officiis qui quia quidem quod
            rem, repellat rerum sint tempora totam unde, vel voluptate voluptates voluptatum. Dolore, sapiente
            temporibus.
        </div>
        <div>Ab atque cumque dolor doloribus exercitationem fuga ipsam, molestias natus quam saepe sed sint? Accusantium
            deleniti dolorum eligendi ex hic incidunt laborum minima natus, officiis optio quidem quod rerum sunt!
        </div>
        <div>Asperiores aspernatur autem culpa deserunt eos et exercitationem expedita ipsum nemo nisi odit quasi quia,
            quibusdam quisquam quos rem rerum sed voluptatum? Beatae consectetur debitis facere harum in incidunt quo.
        </div>
        <div>A ab asperiores at consectetur culpa cumque deleniti dolor eos, esse eum expedita harum ipsa iste iure
            nostrum quam quibusdam, rerum sint soluta suscipit temporibus totam voluptas. Possimus, provident, suscipit.
        </div>
        <div>Aspernatur dolorem eaque, enim excepturi impedit ipsam voluptatem voluptatum. Assumenda earum facilis harum
            ipsa nam, optio quis quos rerum. Ab dolorem est iusto neque nostrum pariatur sequi ut voluptatem voluptates!
        </div>
        <div>Eos fugiat ipsam natus neque nostrum odio odit perspiciatis repellat sequi unde. A beatae eos est iste
            itaque iure, minus modi molestiae nobis non perspiciatis placeat quia quod reprehenderit sit.
        </div>
        <div>Aliquid architecto assumenda enim fuga mollitia nihil omnis porro praesentium, quos, recusandae rem tempora
            tenetur voluptas. Corporis debitis dolor iusto magnam magni maxime, molestiae quam repellendus, rerum
            temporibus veritatis, voluptate.
        </div>
        <div>Aliquam animi commodi consectetur corporis cumque, debitis dolor et eum fugit laboriosam minima mollitia
            nam nisi numquam obcaecati placeat provident quaerat quia quod repellendus saepe similique sint suscipit
            tenetur voluptatibus.
        </div>
        <div>Architecto, assumenda atque commodi corporis dolore doloremque eligendi expedita fuga laudantium libero
            magni maiores minus, modi molestiae natus nemo nostrum odio officia, perspiciatis possimus quas repudiandae
            sit totam voluptas voluptate.
        </div>
        <div>Architecto blanditiis cum dicta dolores doloribus, eos esse exercitationem explicabo facilis incidunt ipsam
            iste laborum magni maiores maxime nam nisi numquam odio officiis perspiciatis placeat praesentium quibusdam
            quis totam voluptatem.
        </div>
        <div>Alias at consequatur deleniti deserunt dolor dolore doloremque dolorum eius est ex fuga ipsa ipsam iusto
            modi molestias natus necessitatibus nisi odit officia placeat quidem quis, recusandae reiciendis
            repudiandae, voluptates.
        </div>
        <div>Ab at consequatur culpa cumque deleniti doloribus, earum id inventore labore minima modi nesciunt odio,
            officia officiis, provident quod quos reprehenderit similique temporibus vero! Cum mollitia numquam odit
            omnis voluptate!
        </div>
        <div>Amet dignissimos eveniet expedita nobis? Atque consequatur corporis cupiditate deleniti facere illo illum,
            porro quae, quia quos rem sed similique suscipit! Architecto eum iusto maiores nam, obcaecati quidem
            reiciendis ullam.
        </div>
        <div>Aliquam aliquid architecto assumenda earum error, illum in iste laborum molestias, mollitia numquam officia
            porro praesentium quia reiciendis repellat sed sint. Consequuntur dolor dolorem et eveniet fugit, obcaecati
            quod vel?
        </div>
        <div>Commodi cupiditate, debitis dicta dignissimos est harum incidunt iure pariatur quos repudiandae? Amet
            asperiores aut cumque dicta, doloremque eligendi esse nisi nostrum quae qui quibusdam sapiente tempore
            veniam voluptates voluptatum?
        </div>
        <div>Ab animi blanditiis corporis cum deserunt dolorum ducimus eos eveniet ex fugit id inventore ipsam itaque
            minus molestiae, necessitatibus nostrum odit omnis possimus praesentium quod quos repellendus reprehenderit
            sunt tempora?
        </div>
        <div>Culpa cupiditate dolores doloribus dolorum eius esse et eveniet facere fugit impedit in incidunt iste,
            labore minus odit pariatur porro praesentium quasi quibusdam quos reprehenderit sequi ut. Assumenda in,
            similique?
        </div>
        <div>Accusantium dicta doloremque esse ex exercitationem facere incidunt ipsam ipsum iure libero minus molestiae
            nulla, pariatur quae quaerat qui quis repellat repellendus rerum saepe sapiente sequi tempora tenetur?
            Harum, libero!
        </div>
        <div>Asperiores beatae cupiditate dignissimos distinctio ea excepturi nisi quis reprehenderit sed sequi tempore,
            tenetur unde, voluptate. Ad animi assumenda atque, aut consectetur cum doloremque ex laboriosam quis, sit
            tempore, voluptas.
        </div>
    </div>
</body>
</html>